<template>
  <div>
    <p class="head">{{ num }}</p>
    <button @click="handClick">按钮</button>
    <!-- 3.使用组件 四种使用方式 -->
    <MyComponent />
     <MyComponent></MyComponent>
    <My-Component></My-Component>
    <My-Component />
  </div>
</template>

<script>
// 1.引入文件
//组件定义之后，一定要引入到主的App.vue组件中
import MyComponent from "./views/MyComponent/"

export default{
  // name:"App",//组件名字(组件名字不写的话，默认以文件名补充)
  // 组件里面的data必须写成函数的形式:原因是将来组件复用时，多个复用的组件不会共享一份数据(某个组件修改数据，其他组件是不变的)
  data(){
    return{
      num:0,
    }
  },

  methods:{
    handClick(){
       this.num++;
    },
  },

  // 2.注册文件(局部注册)
  components:{
    MyComponent
  }

}
</script>

<style>
  .head{
    color:violet;
  }
</style>
